<template>

    <uni-swiper-dot :info="swipers" :current="currentSwiperIndex" @click-item="handleClickDot" mode="round"
        :dots-styles="dotsStyle">
        <swiper class="h-[350rpx] rounded-xl overflow-hidden" @change="change" :current="currentSwiperIndex">
            <swiper-item v-for="(item, index) in swipers" :key="index">
                <image :src="item.img" mode="aspectFill" class="w-full h-full"></image>
                <!-- <view class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-2">
                    {{ item.content }}
                </view> -->
            </swiper-item>
        </swiper>
    </uni-swiper-dot>

</template>
<script setup lang="ts">
const currentSwiperIndex = ref(0);
const dotsStyle = ref(
    {
        backgroundColor: 'rgba(0, 0, 0, .3)',
        border: '1px rgba(0, 0, 0, .3) solid',
        color: '#fff',
        selectedBackgroundColor: 'rgba(236, 236, 236)',
        selectedBorder: '1px rgba(236, 236, 236) solid'
    }
)
const swipers = ref([
    {
        id: 1,
        name: '1',
        content: "这是第1个swiper",
        img: "https://ts1.tc.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0"
    },
    {
        id: 2,
        name: '2',
        content: "这是第2个swiper",
        img: "https://img.tukuppt.com/ad_preview/00/20/23/5c9a118f33ecf.jpg!/fw/780"
    },
    {
        id: 3,
        name: '3',
        content: "这是第3个swiper",
        img: "https://img.shetu66.com/2023/06/14/1686733572306108.jpg"
    }
]);
function change(e: any) {
    currentSwiperIndex.value = e.detail.current;
}
function handleClickDot(index: number) {
    currentSwiperIndex.value = index;
}
</script>